<script setup>
import {onMounted, ref} from "vue";
import {useUserStore,useMessageStore} from "@/store";
import {getReplies} from "@/api/message";
import {ElMessage} from "element-plus";
import {SUCCESS} from "@/core/constants/HttpStatus";
import {useRouter} from "vue-router";

const userStore = useUserStore();
const messageStore=useMessageStore();

const router = useRouter();
// console.log(userStore.userInfo);
const {uid} = userStore.userInfo;
const replyList = ref([]);
// 分页参数
const current = ref(1);
const size = ref(10);
const total = ref(0);
const fetchReply = async () => {
  try {
    const pageRequest = {
      current: current.value,
      size: size.value
    }
    // const res = await getReplies(pageRequest);
    const res = await getReplies(uid);
    console.log(res.data);
    const {code, data, msg} = res.data;
    if(code != SUCCESS) {
      throw new Error(msg);
    }
    console.log("reply",data)
    replyList.value = data.records;
    total.value = Number(data.total);
  } catch (e) {
    ElMessage.error(e?.message || "获取回复失败")
  }
}
const goToDetail = (id) => {
  router.push("/salon/forum/post/"+id);
}

const handlePageChange = () => {
  fetchReply()
}

onMounted(() => {
  // console.log(uid)
  fetchReply();
  messageStore.sendReplyState();
})

//限制内容显示字数
function limit(value,number) {
  if (value && value.length > number) {
    value = value.substring(0, number) + "...";
    return value;
  } else {
    return value;
  }
}
</script>
<template>
  <!-- 我的帖子 -->
  <div class="reply">
    <!-- 标题 -->
    <div class="message-title">
      <span class="title">回复我的</span>
    </div>
    <!-- 回复列表 -->
    <ul class="reply-display">
      <!-- 回复详细信息 -->
      <li
          class="reply-detail"
          v-for="item in replyList"
          :key="item.id"
      >
        <!-- 回复人头像 -->
        <div class="firstName-avatar">{{ item.toUnickname?.charAt(0) }}</div>
        <div class="replier-info">
          <p>
            <span class="replier-name">{{item.fromUnickname}}</span>
            <template v-if="item.isComment == 0">
              <span style="color: darkgray; margin-left: 8px">评论了我的帖子</span>
            </template>
            <template v-else>
              <span style="color: darkgray; margin-left: 8px">回复了我的评论</span>
            </template>
          </p>
          <p class="reply-content">{{ limit(item.content,115) }}</p>
          <span class="reply-time" style="color: darkgray;">{{ item.releaseTime }}</span>
        </div>
        <!-- 我的评论（被回复的评论） -->
        <div class="mycomment-box" @click="goToDetail(item.pid)">
          <span class="mycomment">{{ limit(item.comment,25) }}</span>
        </div>
      </li>

      <!-- 分页组件 -->
      <div class="bottom-box">
        <el-pagination
            class="pagination"
            layout="prev, pager, next"
            :total="total"
            :current-page="current"
            @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </ul>
  </div>

</template>
<style scoped lang="less">
.reply {
  height: auto;
  width: 70%;

  .message-title {
    font-size: 18px;
    font-weight: bolder;
    width: 88%;
    background-color: #FAFAFA;
    margin-left: 65px;
    text-align: left;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #F2F2F2;

    .title {
      margin-left: 15px;
    }
  }

  .reply-display {
    margin-top: 10px;
    width: 88%;
    padding: 0px 10px;
    height: auto;
    background-color: #FAFAFA;
    margin-left: 65px;
    border-radius: 5px;
    border: 1px solid #F2F2F2;
  }
}

.reply-detail {
  position: relative;
  display: flex;
  border-bottom: 1px solid #D7D7D7;
  margin-left: 15px;
  padding: 10px 0px;
  .firstName-avatar {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    line-height: 50px;
    background-color: #a5e6f1;
    border: 0.5px solid rgb(86, 85, 85);
    font-size: 25px;
    box-sizing: border-box;
    text-align: center;
    color: #333;
    margin-top: 10px;
  }

  // 回复者信息
  .replier-info {
    margin-left: 15px;
    padding: 10px 0px;
    width:955px;
    // 回复者名字
    .replier-name {
      font-weight: bold;
      font-size: large;
    }
    .reply-content {
      padding: 10px 0;
    }
  }

  // 被回复的评论
  .mycomment-box {
    position: absolute;
    top: 20px;
    right: 0px;
    padding: 0 10px;
    max-width: 700px;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    font-weight: 700;
    &:hover {
      text-decoration: underline;
    }
  }

}


</style>